<template>
  <!-- 销售订单汇总统计表   -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      class="zdy-form search-form-new"
      label-width="auto"
    >
      <el-form-item label="订单号" prop="no">
        <el-input
          v-model="queryParams.no"
          placeholder="请输入订单号"
          clearable
          size="small"
          @change="searchList"
        />
      </el-form-item>
      <el-form-item label="商品编号" prop="goodsId">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入商品编号"
          clearable
          size="small"
          @change="searchList"
        />
      </el-form-item>
      <el-form-item label="游戏账号" prop="accountNumber">
        <el-input
          v-model="queryParams.accountNumber"
          placeholder="请输入游戏账号"
          clearable
          size="small"
        />
      </el-form-item>
      <!-- <el-form-item label="买家结算状态" prop="">
      <el-select
          v-model="queryParams.saleSettlementState"
          placeholder="请选择结算状态"
          size="small"
          clearable
        >
          <el-option
            v-for="(dict, key) in commonMaps.sellerPayState"
            :key="key"
            :label="dict.label"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="卖家结算状态" prop="">
        <el-select
          v-model="queryParams.supplySettlementState"
          placeholder="请选择结算状态"
          size="small"
          clearable
        >
          <el-option
            v-for="(dict, key) in commonMaps.sellerPayState"
            :key="key"
            :label="dict.label"
            :value="key"
          />
        </el-select>
      </el-form-item> -->
     
      <el-form-item label="销售人" prop="saleUserId">
        <el-select
          v-model="queryParams.saleUserId"
          placeholder="请选择销售人"
          size="small"
          clearable
        >
          <el-option
            v-for="(dict, key) in userList"
            :key="key"
            :label="dict.nickName"
            :value="dict.userId"
            @change="searchList"
          />
        </el-select>
        <!-- <el-input
          v-model="queryParams.saleUserNickname"
          placeholder="请输入销售人"
          clearable
          size="small"
        /> -->
      </el-form-item>
      <el-form-item label="下单日期" prop="remark">
        <el-date-picker
          v-model="timer"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="searchList"
          size="small"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="完成日期" prop="remark">
        <el-date-picker
          v-model="timer2"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="searchList"
          size="small"
        >
        </el-date-picker>
      </el-form-item>
  

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="searchList"
          class="zdy-btn"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          type="primary"
          plain
          size="small"
          @click="resetQuery"
          class="zdy-btn zdy-btn-refresh"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="huizong">
      <el-descriptions label-style="font-weight:600;color:#333" border direction="vertical" :column="7" title="订单总额">
        <el-descriptions-item label="买家实付">{{totalData?totalData.actualAmountSum:0}}</el-descriptions-item>
        <el-descriptions-item label="卖家结算">{{totalData?totalData.supplyDiscountAmount:0}}</el-descriptions-item>
        <el-descriptions-item label="订单利润">{{totalData?totalData.profitsSum:0}}</el-descriptions-item>
        <el-descriptions-item label="售后总额">{{totalData?totalData.afterAmountSum:0}}</el-descriptions-item>
        <el-descriptions-item label="售后平台赔付">{{totalData?totalData.platformPayAmountSum:0}}</el-descriptions-item>
        <!-- <el-descriptions-item label="售后卖家赔付">{{totalData?totalData.sellerPayAmountSum:0}}</el-descriptions-item> -->
        <el-descriptions-item label="真实利润">
          <span class="price">{{totalData?(Math.round((totalData.profitsSum - (totalData.platformPayAmountSum||0))*100)/100):0}}</span>
        </el-descriptions-item>
    </el-descriptions>
    </div>
    <div class="zdy-main customTab">
          <el-table
            :data="tableData.records"
            border
            height="calc(100vh - 460px)"
            style="width: 100%"
            

          >
            <!-- <el-table-column
              prop=""
              label="归属部门"
              min-width="120"
            ></el-table-column> -->
            <el-table-column
              prop="no"
              label="订单编号"
              min-width="120"
            >
            <template slot-scope="scope">
                <span class="link" @click="goOrderDetail(scope.row.id)">{{
                scope.row.no
                }}</span
                >
              </template>
          </el-table-column>
            <el-table-column
              prop="createTime"
              label="下单时间"
              min-width="160"
            ></el-table-column>
            <el-table-column
              prop="finishTime"
              label="完成时间"
              min-width="160"
            ></el-table-column>
            <el-table-column prop="goodsId" label="商品编号" min-width="80">
              <template slot-scope="scope">
                <span class="link" @click="openH5(scope.row.goodsId)">{{
                  scope.row.goodsId
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="accountNumber" label="游戏账号" min-width="100"> </el-table-column>
            <el-table-column
              prop="saleChannel"
              label="买家昵称"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="supplyChannel"
              label="卖家昵称"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="saleUserNickname"
              label="销售人"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="actualAmount"
              label="买家实付金额"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="supplyDiscountAmount"
              label="卖家结算金额"
              min-width="80"
            ></el-table-column>
            <!-- <el-table-column prop="" label="支付状态" min-width="120">
              <template slot-scope="scope">
                <span>{{
                  commonMaps. buyerPayState[scope.row.salePay] || commonMaps. buyerPayState["1"]
                }}</span
                >
              </template>
            </el-table-column> -->
            <el-table-column prop="" label="买家结算状态" min-width="100">
              <template slot-scope="scope">
                <span>
                  <el-tag :type="commonMaps. saleSettlementStateMap[scope.row.saleSettlementState].type">{{
                  commonMaps. saleSettlementStateMap[scope.row.saleSettlementState].label || commonMaps. saleSettlementStateMap["1"].label
                }}</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="卖家结算状态" min-width="100">
              <template slot-scope="scope">
                <span>
                  <el-tag :type="commonMaps. sellerPayState[scope.row.supplySettlementState].type">{{
                  commonMaps. sellerPayState[scope.row.supplySettlementState].label || commonMaps. sellerPayState["1"].label
                }}</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="profits"
              label="总利润"
              min-width="80"
            >
            <template slot-scope="scope">
              <div>
                <span :style="{color:(scope.row.platformPayAmount?  scope.row.profits - scope.row.platformPayAmount:scope.row.profits)>0?'#027444':'#ff585f'}">{{ scope.row.platformPayAmount?  scope.row.profits - scope.row.platformPayAmount:scope.row.profits}}</span>
              </div>
            </template>
          </el-table-column>

          
            <el-table-column
              prop="remark"
              label="备注"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="afterNo"
              label="售后单号"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="afterAmount"
              label="售后金额"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="platformPayAmount"
              label="平台售后赔付"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="sellerPayAmount"
              label="卖家售后赔付"
              min-width="80"
            ></el-table-column>
            <!-- platformPayAmount -->
          </el-table>
    </div>
    <div class="pages-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      ></el-pagination>
    </div>
    <h5Dialog ref="h5Dialog"></h5Dialog>
    <!-- <orderDetailDialog ref="orderDetailDialog"></orderDetailDialog> -->
  </div>
</template>

<script>
import h5Dialog from "@/components/h5Dialog.vue";
// import orderDetailDialog from "../businessCenter/saleOrder/components/orderDetailDialog";
import orderApi from "@/api/pickUp/order.js";
import { getDicts } from "@/api/system/dict/data";
import {
  getSupplyList
} from "@/api/info/info";
export default {
  name: "orderStatisicsList",
  components: {
    h5Dialog,
    // orderDetailDialog,
  },
  data() {
    return {
      totalData:{},
      timer: [],
      timer2:[],
      showMsgHis:false,//显示历史消息
      toGroups:'',//历史消息群id
      // 提号时间，商品ID 游戏类型 区服 实名状态   游戏账号【对应的商品链接】
      tableData: {
        records: [],
        total: 0,
      },
      btnLoading: false,
      loading: false,
      actived: "3",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        account: null,
        accountId: null,
        tel: null
      },
      copyVlaue: "",
      retailDomainList: [],
      IMhost: "",
      userList:[]
    };
  },
  created() {
    this.getList();
    this.getDomain()
    this.getUserList()
  },
  activated() {},
  methods: {
    // 获取供货人列表
    getUserList() {
      getSupplyList("salesCustomer").then(res => {
        if (res.code == 200) {
          this.userList = res.data;
          // console.log(this.userList);
        }
      });
    },
  
    // 获取分销站域名
    getDomain() {
      getDicts("retailDomain").then((res) => {
        if (res.code == 200) {
          this.retailDomainList = res.data;
        }
      });
    },
    // 获取列表
    getList() {
      // queryParams 请求列表
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.createTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.createTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.createTimeStart = "";
        this.queryParams.createTimeEnd = "";
      }
      if (this.timer2 && this.timer2.length == 2) {
        this.queryParams.finishTimeStart = this.timer2[0] + " 00:00:00";
        this.queryParams.finishTimeEnd = this.timer2[1] + " 23:59:59";
      } else {
        this.queryParams.finishTimeStart = "";
        this.queryParams.finishTimeEnd = "";
      }
      orderApi.saleOrderStatisticsList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.totalData = res.params
        this.tableData.total = res.total;
      });
    },
    // 搜索
    searchList(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // tabs切换时触发
    tabChange() {
      this.queryParams.pageNum = 1;
      this.queryParams.orderStatus = this.actived;
      this.getList();
    },
   
    //查看订单详情
    goOrderDetail(id) {
      // this.$refs.orderDetailDialog.open(id, "kefu");
      
    },
//     // 打开结算弹窗
//     openSettle(){
// this.$refs.settlementDialog.open()

//     },
  
 
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        account: null,
        accountId: null,
        tel: null
      };
      this.timer = []
      this.timer2 = []
      this.getList();
    },
    // 打开h5详情
    openH5(goodsId) {
      // this.$refs.h5Dialog.open(this.h5Url + info.accountId);
      let hostt = `${this.retailDomainList[1].dictValue}/#/pages/detail/index?id=${goodsId}`;
      this.$refs.h5Dialog.open(hostt);
    },
   
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    exportOrder() {},
  },
};
</script>
<style lang="scss" scoped>
.huizong{
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.price{
  font-size: 16px;
  color: crimson;
  font-weight: 600;
}
.link {
  color: blue;
  cursor: pointer;
}
</style>
